
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/bindLoading.css" />
		<script type="text/javascript" src="../js/layui-v2.5.5/layui.js"></script>
		<style>
			.testLoading {
				position: relative;
				width: 200px;
				height: 200px;
				border: 2px solid #00557f;
				margin:25px 25px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="testLoading" id="loading1">
			<div style="width: 200px;height: 500;text-align: center;">
				往事如风，常伴吾身。
			</div>
			
		</div>
		<div class="testLoading" id="loading2"></div>
		<div class="testLoading" id="loading3"></div>
		<div class="testLoading" id="loading4"></div>
		<div class="testLoading" id="loading5"></div>
		<div class="testLoading" id="loading6"></div>
	</body>
	<script type="text/javascript" src="../bindLoading/bindLoading.js"></script>
	<script>
		layui.config({
		  base: '/BindLoading/'
		}).extend({
		  bindLoading: 'bindLoading/bindLoading'
		});
		layui.use(['bindLoading'],function(){
			var bindLoading = layui.bindLoading;
			bindLoading.loading("#loading1",{type:1,times: 5000,point:{show:true}});//默认为加载中
			bindLoading.loading("#loading2");
			bindLoading.loading("#loading3",{type:3,point:{show:true,content:'上传中'}});
			bindLoading.loading("#loading4",{type:4,zindex:19891015,point:{show:true,content:'下载中',style:"color: blue"}});
			bindLoading.loading("#loading5",{type:3,point:{show:true,content:'上传中'}});
			setTimeout(function(){
				bindLoading.loading('#loading5',{type:5,point:{show:true,content:'上传完成'}});
			},10000)
			bindLoading.loading("#loading6",{type:4,point:{show:true,content:'下载中'}});
			setTimeout(function(){
				bindLoading.loading('#loading6',{type:6,point:{show:true,content:'下载失败'}});
			},10000)
		})
	</script>
</html>
